<template>
	<div>
		<section class="area-container">
			<el-select clearable v-model="province" placeholder="省" class="select-margin" value-key="c" @change="getProvince" :disabled='disabled'>
				<el-option v-for="item in areaList" :key="item.c" :label="item.n" :value="item" ></el-option>
			</el-select>
      <el-select clearable v-model="city" placeholder="市" :disabled="!province || disabled" class="select-margin" value-key="c" @change="getCity">
				<el-option v-for="item in cityList" :key="item.c" :label="item.n" :value="item"></el-option>
			</el-select>
      <el-select clearable v-model="county" value-key='c' placeholder="县" :disabled="!city || disabled" class="select-margin" @change="getAreaCode" v-if='type === 0'>
				<el-option v-for="item in countyList" :key="item.c" :label="item.n" :value="item"></el-option>
			</el-select>
		</section>
	</div>
</template>

<script>
export default {
  data () {
    return {
      areaList: [],
      provinceCode: '',
      province: {},
      cityCode: '',
      city: {},
      countyCode: '',
      county: {},
      cityList: [],
      countyList: []
    }
  },
  props: {
    areaCode: {
      type: String
    },
    type: {
      type: Number,
      default: 0
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    province (val) {
      this.city = {}
      this.county = {}
    },
    city (val) {
      this.county = {}
    },
    async areaCode (val) {
      if (val) {
        this.handleDate()
      }
    }
  },
  methods: {
    // 数据处理
    async handleDate () {
      if (!(this.areaList && this.areaList.length > 0)) {
        this.areaList = await this.getAreaList()
      }
      // 处理省级数据
      let provinceCode = this.areaCode.substring(0, 2) + '0000'
      this.province.c = provinceCode
      // 处理市级数据
      this.areaList.map(item => {
        if (item.c === provinceCode) {
          if (provinceCode === '110000' || provinceCode === '120000' || provinceCode === '310000' || provinceCode === '500000') {
            this.cityList = [{
              c: item.c,
              ns: item.ns,
              n: item.n
            }]
            this.city.c = item.c
          } else {
            this.cityList = item.ns
            this.city.c = this.areaCode.substring(0, 4) + '00'
          }
        }
      })
      // 处理县级数据
      this.cityList.map(item => {
        if (item.c === this.city.c) {
          this.countyList = item.ns
        }
      })
      this.county.c = this.areaCode
    },
    getProvince (val) {
      if (val.c === '110000' || val.c === '120000' || val.c === '310000' || val.c === '500000') {
        this.cityList = [{
          c: val.c,
          ns: val.ns,
          n: val.n
        }]
        this.city = val
      } else {
        this.cityList = val.ns
      }
      if (this.type === 1) {
        this.$emit('child-say', val.c)
      }
    },
    getCity (val) {
      this.countyList = val.ns
      if (this.type === 1) {
        this.$emit('child-say', val.c)
      }
    },
    getAreaCode (val) {
      this.$emit('child-say', val.c)
    },
    async getAreaList () {
      let areaList = []
      areaList = await import('./area.min.json')
      return areaList
    }
  },
  async mounted () {
    this.areaList = await this.getAreaList()
    if (this.areaCode) {
      this.handleDate()
    }
  }
}
</script>

<style lang="scss">
.area-container {
  font-size: 0;
}
//.el-select {
//  width: 136px;
//}
.select-margin {
  margin-right: 20px;
}
</style>
